<template>
    <div>
      <div class="header">
        <!--<img v-bind:src="[header+info.data.logo]">-->
        <router-link to="/aboutUs">关于我们</router-link>
        <router-link to="/introduction">公司简介</router-link>
        <router-link to="/index">首页</router-link>
      </div>
      <div class="main">
        <span>
          首 页>产 品 中 心
        </span>
        <div>
          <img class="headerImg" src="../assets/产品中心@2x.png"/>
          <yd-flexbox>
            <div class="productImg">
              <yd-slider autoplay="3000">
                <yd-slider-item v-for='(image,index) in info.data.product.productImgPath' :key='index'>
                  <img :src="[header+image]">
                </yd-slider-item>
              </yd-slider>
            </div>
            <yd-flexbox-item class="product" >
              <div class="details">
                <div class="title">{{info.data.product.productName}}</div>
                <div class="propaganda">{{info.data.product.productName}}</div>
                <div class="price">¥{{info.data.product.productPrice}}</div>
                <div class="other c1">型 号: {{info.data.product.productModel}}</div>
                <div class="other c2">适 合 人群: {{info.data.product.productSkin}}</div>
                <div class="other c3">适 合 部 位: {{info.data.product.productPart}}</div>
                <div class="other c4">功 效: {{info.data.product.productEfficacy}}</div>
                <div class="other c5">净 含 量: {{info.data.product.productNetContent}}</div>
                <div class="other c6">规 格 类 型: {{info.data.product.productSize}}</div>
                <a id="shop">
                  <img src="../assets/商城购买@2x.png" alt="未找到相关图片">
                </a>
              </div>
            </yd-flexbox-item>
          </yd-flexbox>
        </div>

        <div class="guess" style="margin-top: 20px;">
          <img class="segmentation" src="../assets/猜你喜欢b2@2x.png">
          <yd-grids-group :rows="3" >
            <yd-grids-item v-for="l in info.data.like">
              <div slot="else" style="text-align: center;">
                <router-link :to="{name:'ProductDetail',params:{id:l.id}}">
                <img class="pro" :src="header+l.productImgPathHead" alt="未找到相关图片">
                </router-link>
              </div>
              <div class="text" slot="else">
                <p class="price" slot="text">￥ {{l.productPrice}}</p>
                <p slot="text">{{l.productName}}</p>
              </div>
            </yd-grids-item>
          </yd-grids-group>
        </div>
      </div>
    </div>
</template>

<script>
    export default {
        name: "ProductDetail",
        data() {
          return {
            header:"https://sy.mujiwulian.net/sy/",
            info:{
              code: null,
              msg: "",
              data: {
                product: {
                  id: null,
                  productName: "",
                  productImgPath: [],
                  productPrice: null,
                  productModel: "",
                  productSkin: "",
                  productPart: "",
                  productEfficacy: "",
                  productNetContent: "",
                  productSize: "",
                  productUrl: ""
                },
                like: [
                  {id:null,productName:"",productImgPathHead:"",productPrice:null}
                ]
              }
            }
          }
        },
        mounted(){
          this.$axios
            .get("https://sy.mujiwulian.net/sy/website/product/detail/?sy="+
              this.$store.getters.getUser.sy+"&id="+this.$route.params.id)
            .then(response=>(this.info=response.data));
        },
        watch: {
          '$route' (to, from) {
            this.$router.go(0);
          }
        },
    }
</script>

<style scoped>
  *{
    margin: 0px;
    padding: 0px;
  }
  .header{
    height: 40px;
    background-color: rgb(133,160,173);
    margin-bottom: 12px;
  }
  .header a{
    color: rgb(97,62,147);
    height: 100%;
    font-size: 15px;
    font-weight: 100;
    float: right;
    display:block;
    width: 65px;
    text-align: center;
    margin-left: 10px;
    margin-right: 10px;
    line-height: 40px; /* 设置垂直居中 */
  }

  .main>span{
    color: rgb(131,131,131);
    font-size: 15px;
    margin: 20px;
  }
  .headerImg{
    display: block;
    margin: 30px auto;
    height: 36px;
    width: auto;
  }
  .productImg{
    width: 50%;
    margin-top: 0px;
  }
  .details{
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 10px;
  }

  .details>.title{
    font-size: 5px;
    font-weight: 600;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .details>*{
    margin-top: 3px;
    margin-bottom: 3px;
  }
  .details img{
    width: 50%;
  }
  .details>.propaganda{
    font-size: 5px;
    color: rgb(135,146,189);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .details>.price {
    font-size: 18px;
    color: rgb(255,0,54);
  }
  .guess{
    display: block;
    text-align: center;
  }
  .guess .pro{
    width: 80%;
  }
  .guess .text{
    text-align: left;
    margin-left: 10%;
  }
  .guess .price{
    color: red;
    margin-top: 10px;
  }
  .guess>.segmentation{
    width: 95%;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 10px;
  }
</style>
